<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="css/iframer.css" media="screen,projector">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery.iframer-1.0.js"></script>
    <script type="text/javascript">
        // resize hints
        var resizeHintz = new Array();
        // redIFrame uses default resizing
        resizeHintz["greenIFrame"] = "#greenDiv"; // id selector
        resizeHintz["blueIFrame"] = ".hintable"; // class selector
        // blackIFrame is not resized

        var customOptions = {
            resizeHints:resizeHintz
        };

        // resize all iframes if needed every 1 millisecond
        $(document).ready(function () {
            setInterval(function() {
                $(".resizable").resizeIFrames(customOptions)
            }, 1);
        });

        // animation to keep the resize controller in the right hand corner
        $(window).scroll(function() {
            $("#controller").animate({top:$(window).scrollTop() + "px"}, {queue: false, duration: 1});
        });

        // update the resize controller height and width values
        function updateResizeController() {
            var color = "#" + $("#color").val();
            var $div = $(color + "IFrame").contents().find(color + "Div");
            $("#width").val($div.width());
            $("#height").val($div.height());
        }

        // resizes the selected content to the specified size
        function resizeIFrameContent() {
            var color = "#" + $("#color").val();
            var width = parseInt($("#width").val());
            var height = parseInt($("#height").val());
            $($(color + "IFrame").contents().find(color + "Div")[0]).css("height", height).css("width", width);
        }
    </script>
    <title>jQuery IFramer Plug-in Demo</title>
</head>
<body>

<div id="controller">
    <table>
        <tr>
            <td align="right">Color:</td>
            <td>
                <select id="color" onchange="updateResizeController()">
                    <option></option>
                    <option>red</option>
                    <option>green</option>
                    <option>blue</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">Width:</td>
            <td align="right"><input id="width" type="text" onblur="resizeIFrameContent()"/></td>
        </tr>
        <tr>
            <td align="right">Height:</td>
            <td align="right"><input id="height" type="text" onblur="resizeIFrameContent()"/></td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td valign="top">
            <iframe id="redIFrame" class="resizable" src="red.html" width="0" height="0" scrolling="auto"
                    marginheight="0" marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="greenIFrame" class="resizable" src="green.html" width="0" height="0" scrolling="auto"
                    marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="blueIFrame" class="resizable" src="blue.html" width="0" height="0" scrolling="auto"
                    marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="blackIFrame" src="black.html" width="400" height="400" scrolling="auto" marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
    </tr>
</table>
</body>
</html>